<template>
	<div class="childPage">
		<div class="buttons">
			<li @click="smallClick"></li>
			<li @click="bigClick"></li>
			<li @click="resetClick"></li>
		</div>
		<chart-block chartID="chart1" :title="RelationMapOptionData.title" :optionData="RelationMapOptionData" chartType="getRelationMap2" height="67vh" style="padding:0;background:rgba(12,51,127,0);border:none;box-shadow: none;" :isTitle="false" ref="charts2"></chart-block>
	</div>
</template>

<script>
import {getTpList1} from '@/api/pages.js'
export default{
	components: {
		ChartBlock: () => import('@/components/chart-block')
	},
	// sessionStorage.getItem('companyName')
	data(){
		return {
			RelationMapOptionData:{},
			indexId:this.$route.query.indexId,
			zoom:window.innerWidth<=1366?0.8:1,
			seriesData:[]
		}
	},
	created() {
		this.RelationMapOptionData.seriesData=this.seriesData
	},
	mounted() {
		this.getTpList1('E115',this.indexId)
	},
	methods:{
		// 缩小
		smallClick(){
			this.zoom-=0.1
		},
		// 放大
		bigClick(){
			this.zoom+=0.1
		},
		// 重置
		resetClick(){
			this.zoom=window.innerWidth<=1366?0.8:1
		},
		getTpList1(busiCode,id){
			getTpList1(busiCode,id).then(res=>{
				if(res.data.code==200){
					this.seriesData=res.data.data.seriesData[0].data
					this.RelationMapOptionData={
						title:this.$route.query.name,
						zoom:window.innerWidth<=1366?0.8:1,
						seriesData:res.data.data.seriesData[0].data
					}
				}
			}).catch(err=>{
				
			})
		}
	},
	watch: {
		zoom(){
			let _this = this
			this.RelationMapOptionData={
				title:this.$route.query.name,
				zoom:_this.zoom,
				seriesData:_this.seriesData
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.childPage{
		position: relative;
		width:100%;
		height:69vh;
		.buttons{
			width:7vw;
			height:3.2vh;
			position: absolute;
			right:0vh;
			top:0vh;
			background: url(../../assets/images/buttons.png);
			background-size: 100% 100%;
			z-index: 9999999;
			li{
				list-style: none;
				width:33.333%;
				height:100%;
				float: left;
				cursor: pointer;
			}
		}
	}
</style>
